<style>
    .tem {
        padding-top:20px;
    }
</style>
<template>
    <div>
        <Row>
            <Card>
                <div class="top-tool-bar">
                    <Select v-model="province" style="width:150px" placeholder="请选择省份" :label-in-value="true" @on-change="selectProvince">
                        <Option v-for="item in provinceList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>

                    <Select v-model="city" style="width:150px" placeholder="请选择城市" :label-in-value="true" @on-change="selectCity">
                        <Option v-for="item in cityList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>
                    <Select v-model="area" style="width:150px" placeholder="请选择地区" :label-in-value="true" @on-change="selectArea">
                        <Option v-for="item in areaList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>

                    <Select v-model="type" style="width:150px" placeholder="请选择站点类型" :label-in-value="true" @on-change="selectType">
                        <Option v-for="item in typeList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
                    </Select>

                    <Select v-model="site" style="width:150px" placeholder="请选择站点名" :label-in-value="true" @on-change="selectSite">
                        <Option v-for="item in siteList" :value="item.id" :key="item.id" :label="item.name">{{item.name }}</Option>
                    </Select>

                    <Button type="primary" icon="checkmark-circled" @click.prevent.stop="onOk">确定</Button>
                </div>
            </Card>
        </Row>
    </div>
</template>
<script type="text/ecmascript-6">
    import api from '@/libs/util';
    export default {
        mounted() {
            //初始化
            this.getProvince();
        },
        data() {
            return {
                provinceList: [],
                cityList: [],
                areaList: [],
                typeList: [],
                siteList: [],
                province:null,
                city:null,
                area:null,
                type:null,
                site:null,
            }
        },
        methods: {
            getProvince() {
                let params = {
                    id:0
                };
                this.$emit('showLoading');
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.provinceList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getCity(id) {
                let params = {
                    id:id
                };
                this.$emit('showLoading');
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.cityList = data.data;

                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getArea(id) {
                let params = {
                    id:id
                };
                this.$emit('showLoading');
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.areaList = data.data;

                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getType() {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo,params).then((data) => {
                    this.$emit('hideLoading');
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            getSite(id) {
                let params = {
                    id:id
                };
                api.fetchPost(api.path.findStationInfo, params).then((data) => {
                    this.$emit('hideLoading');
                    this.siteList = data.data;
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            selectProvince(data) {
                console.log(data);
                this.cityList = [];
                this.areaList = [];
                this.getCity(data.value);

            },
            selectCity(data) {
                console.log(data);
                this.areaList = [];
                this.getArea(data.value);
            },
            selectArea(data) {
                console.log(data);
            },
            selectType(data) {
                console.log(data);
                this.siteList = [];
                this.getSite(data.value);
            },
            selectSite(data) {
                console.log(data);
            },
            onOk() {
                let params = {
                    province:this.province,
                    city:this.city,
                    area:this.area,
                    type:this.type,
                    site:this.site,
                };
                api.fetchPost(api.path.findStationInfo,params).then((data) => {
                    if(data.code == 10000){
                        this.$emit('hideLoading');
                        this.loading = false;
                    }else {
                        this.$Message.error(data.msg);
                    }
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            }
        }
    }
</script>
